import React from 'react';
import {SearchBar as AntdSearchBar} from 'antd-mobile';
import style from './css/SearchBar.css';

class SearchBar extends React.Component {
	
	render() {
		return (
			<span className='searchBarContainer'>
				<AntdSearchBar 
				defaultValue={this.props.defaultValue} 
				value={this.props.value} 
				placeholder={this.props.placeholder} 
				onSubmit={this.props.onSubmit} 
				onChange={this.props.onChange} 
				onFocus={this.props.onFocus} 
				onBlur={this.props.onBlur} 
				onCancel={this.props.onCancel} 
				showCancelButton={this.props.showCancelButton} 
				cancelText={this.props.cancelText} 
				disabled={this.props.disabled} 
				onClear={this.props.onClear}
				maxLength={this.props.maxLength}>
	        		{this.props.children}
	        	</AntdSearchBar>
        	</span>
		);
	}
	
}

SearchBar.focus = AntdSearchBar.focus;

export default SearchBar;